<template>
  <div>
    <div class="main">
      <div class="head-top">
        <mt-header title="期刊列表">
          <mt-button icon="back" slot="left" @click='back'></mt-button>
          <mt-button slot="right" @click="toggle">
            <img src="../../../../../static/book/book09.png" alt="" width="30px" height="30px" v-if="CollectNo.whetherCollection == 1" />
            <img src="../../../../../static/book/book08.png" alt="" width="30px" height="30px" v-else/>
          </mt-button>
        </mt-header>
      </div>

      <div class="perodicallist-content">
        <img :src="perSrcsmail+(perdata.max_file_name||perdata.cover).substring(0,4)+'.jpg'" alt="" onerror="this.src='../../../../../static/home/ndmz.png'" width="91px" height="128px" />
        <div class="title">
          <p v-text="perdata.source||perdata.name">《读者》杂志</p>
          <p>更新至{{perdata.max_period||perdata.cover}}期</p>
          <p>120万阅读应冲接口</p>
        </div>
      </div>
      <div class="cell">
        <router-link v-for="(item,index) in perdatalist" :key="index" :to='{name:"percontent",params:{period:JSON.stringify(item.period)}}'>
          <p class="time">第{{item.period}}期</p>
        </router-link>
      </div>
      <div class="peri-tabar" @click="goToPercontent()">
        立即阅读
      </div>
    </div>
  </div>
</template>

<script>
import api from "./../../../../api/api.js";
import baseurl from "./../../../../api/baseurl.js";
import { Indicator, Toast } from "mint-ui";

export default {
  data() {
    return {
      perSrcsmail: "",
      perdata: [],
      perdatalist: [],
      typeName: "",
      isShow: false,
      active: true,
      CollectNo:[]
    };
  },
  created() {
    let userid = localStorage.getItem("userid"); //取typeName
    this.perSrcsmail = api.perSrcsmail;
    this.perdata = JSON.parse(this.$route.params.perdata);
    console.log(this.perdata)
    const pertwo = JSON.stringify(this.perdata.source||this.perdata.name); //存source
    localStorage.setItem("source", pertwo);
    this.perdata.source = JSON.parse(localStorage.getItem("source"));
    this.getPerthree();
    this.isCollect(); 
    
  },
  methods: {
    // 查询期刊记录
    isCollect() {
      const userid = localStorage.getItem("userid");
      const accid = localStorage.getItem("accid");
      const params = new URLSearchParams();
      params.append("columnType", 5);
      params.append("type", 0);
      params.append("userid", userid);
      params.append("fileid", this.perdata.source);
      params.append("edition", accid);
      this.$http({
        method: "post",
        url: baseurl.urls + "readrecord/selectBookMessage",
        data:params
      })
        .then(response => {
          this.CollectNo = response.data.date;
          console.log(this.CollectNo);
        })
        .catch(error => {
          console.log(error);
        });
    },
    goToPercontent() {
      this.$router.push({
        name: "percontent",
        params: { period: JSON.stringify(this.perdatalist[0].period) }
      });
    },
    // :to='{name:"percontent",params:{period:JSON.stringify(item.period)}}'
    toggle() {
      if(this.CollectNo.whetherCollection == 0){
        this.addCollect();
      }else{
        this.delCollect();
      }
    },
    // 删除收藏
    delCollect() {
      const userid = localStorage.getItem("userid");
      this.$http({
        method: "post",
        url: baseurl.urls + "/collection/deleteCollection",
        params: {
          id: this.CollectNo.collectionId
        }
      })
        .then(response => {
          if (response.status == 200) {
            Toast("删除成功");
            this.isCollect()
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    addCollect() {
      const userid = localStorage.getItem("userid");
      const params = new URLSearchParams();
      params.append("userid", userid);
      //收藏类型 例如：1 图书 2悦读 3 视听 4 报纸 5 期刊 ...
      params.append("columntype", 5);
      //封面
      params.append("cover", this.perdata.max_file_name||this.perdata.cover);
      //名称
      params.append("name", this.perdata.source);
      //类型 1 图书 2 期刊  3 报纸  ....
      params.append("type", 0);
      //描述
      params.append("describe", "");
      //播放数量
      params.append("playback", "");
      //fileid 唯一值不能重复
      params.append("fileid", this.perdata.source || this.perdata.fileId);
      this.$http({
        method: "post",
        url: baseurl.urls + "collection/addCollection",
        data: params
      })
        .then(response => {
          if (response.status == 200) {
            Toast("收藏成功");
            this.isCollect();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    back() {
      this.$router.back(-1);
    },
    getPerthree() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });
      this.$http({
        method: "post",
        url: api.baseURL + "getCnkiGroupInformation",
        params: {
          inParam: {
            group: ["period"],
            constraint: [
              {
                name: "source",
                value: this.perdata.source
              }
            ],
            time: this.datevalue,
            userId: this.userid,
            pageSize: 10,
            currentPage: 1,
            resourceType: 5,
            maxvalue: [],
            sysCode: "FH_PUBOPE"
          }
        }
      })
        .then(response => {
          if (response.status == 200) {
            this.perdatalist = response.data.data;
            console.log(this.perdatalist);
            Indicator.close();
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.head-top {
  /*margin-bottom: 15px;*/
}

.perodicallist-content {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;
}

.perodicallist-content img {
  border-radius: 8px;
  margin: 20px 0;
  margin-left: 15px;
}

.perodicallist-content .title {
  margin-left: 25px;
}

.perodicallist-content .title p:nth-of-type(1) {
  margin-bottom: 20px;
  font-size: 18px;
}

.perodicallist-content .title p:nth-of-type(2) {
  margin-bottom: 10px;
  font-size: 13px;
  color: #a1a1a1;
}

.perodicallist-content .title p:nth-of-type(3) {
  margin-bottom: 10px;
  font-size: 13px;
  color: #a1a1a1;
}

.perodicallist-content .title p:nth-of-type(4) {
  margin-bottom: 10px;
  font-size: 13px;
  color: #a1a1a1;
}

.main .cell {
  margin-top: 16px;
  margin-bottom: 65px;
}

.main .time {
  width: 100%;
  height: 45px;
  background: #fff;
  margin-top: 2px;
  line-height: 45px;
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 600;
}

.main .peri-tabar {
  width: 100%;
  height: 45px;
  position: fixed;
  bottom: 0;
  text-align: center;
  color: #ffffff;
  font-size: 15px;
  line-height: 45px;
  background: #e60012;
}
</style>